<template>
  <div class="overall-main" v-loading="isLoading">
    <div class="BAC-title">桥区一览图</div>
    <!-- 统计内容 -->
    <div class="count-content">
      <div class="top-part">
        <div class="info width55">
          <div class="title">
            <img src="../../../static/images/bridgeAreaControl/home_lc.png" alt="" />
            <div class="name">航道里程数</div>
            <div class="value">共{{ BgAndWyData.hdMile?.toString() || "--" }}公里</div>
          </div>
          <div class="item">
            <div class="name">高等级</div>
            <div class="value">{{ BgAndWyData.hdHighLevel?.toString() || "--" }}</div>
          </div>
          <div class="item">
            <div class="name">等级</div>
            <div class="value">{{ BgAndWyData.hdOtherLevel?.toString() || "--" }}</div>
          </div>
        </div>
        <div class="info width45">
          <div class="title">
            <img src="../../../static/images/bridgeAreaControl/home_cbll.png" alt="" />
            <div class="name">上月船舶流量(艘)</div>
          </div>  
          <!-- <div class="item">
            <div class="name">高等级</div>
            <div class="value">{{ CbllData.high?.toString() || "--" }}</div>
          </div>
          <div class="item">
            <div class="name">等级</div>
            <div class="value">{{ CbllData.other?.toString() || "--" }}</div>
          </div> -->
          <div class="item">
            <div class="name">等级</div>
            <div class="value">{{ parseInt(CbllData.high + CbllData.other) }}</div>
          </div> 
          <div class="title" style="margin-top: 4px;">
            <img src="../../../static/images/bridgeAreaControl/hidden-trouble.png" alt="" />
            <div class="name">隐患桥梁数量(座)</div>
          </div>  
          <div class="item">
            <div class="name">全省</div>
            <div class="value">{{ BgAndWyData.hiddenBridge || "--" }}</div>
          </div> 
        </div>
      </div>
      <div class="bottom-part">
        <div class="title">
          <img src="../../../static/images/bridgeAreaControl/home_ql.png" alt="" />
          <div class="name">桥梁总数(座)</div>
          <div class="value">共{{ BgAndWyData.totalBridge?.toString() || "--" }}座</div>
        </div>
        <div class="info">
          <div class="item width40">
            <div class="name" style="width: 80px;">高等级航道</div>
            <div class="value">{{ BgAndWyData.bgHighLevel?.toString() || "--" }}</div>
          </div>
          <div class="item width60">
            <div class="name" style="width: 150px;">高等级航道<span class="db">(净空达标)</span></div>
            <div class="value" style="color: #4ED9A0;">{{ BgAndWyData.bgDabiaoHighLevel?.toString() || "--" }}</div>
          </div>
          <div class="item width40">
            <div class="name" style="width: 80px;">等级航道</div>
            <div class="value">{{ BgAndWyData.bgOtherLevel?.toString() || "--" }}</div>
          </div>
          <div class="item width60">
            <div class="name" style="width: 150px;">高等级航道<span class="bdb">(净空不达标)</span></div>
            <div class="value" style="color: #F13939;">{{ BgAndWyData.bgNoDabiaoHighLevel?.toString() || "--" }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 筛选 -->
    <div class="filter">
      <div class="top-part">
        <!-- <div class="search">
          <van-search
            v-model="searchForm.searchvalue"
            @search="filterClick"
            @clear="filterClick"
            placeholder="请输入航道名称|桥梁名称筛选"
          />                                 
        </div>
        <div class="search-text" @click="filterClick">搜索</div> -->
        <el-select
          v-model="searchForm.searchvalue"          
          placeholder="请选择桥梁"
          style="width: 90%"
          @change="filterClick"
          :filterable="true"
        >
          <el-option
            v-for="item in bridgeOption"
            :key="item.bridgeName"
            :label="item.bridgeName"
            :value="item.bridgeName"
          />
        </el-select>
        <div class="filter-icon" @click="showPopup = true">
          <img src="../../../static/images/bridgeAreaControl/filter-icon.png" alt="">
        </div>
        <van-popup v-model:show="showPopup" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择桥梁"
            :options="BmCenterData"
            @close="showPopup = false"
            @change="onHandleChange"
            @finish="onHandleFinish"
          />
        </van-popup>
      </div>
      <div class="bottom-part">
        <el-select
          v-model="searchForm.gradevalue"                    
          multiple
          collapse-tags
          placeholder="内河高等级航道"  
          @change="()=>{searchForm.hiddenTrouble = '',filterClick()}"
          style="width: 49%;margin-right: 2%;"                
        >
          <el-option
            v-for="item in searchForm.gradeOption"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
        <el-select
          v-model="searchForm.gradevalue2"
          multiple
          collapse-tags
          placeholder="内河4-7等级航道"                    
          @change="()=>{searchForm.hiddenTrouble = '',filterClick()}"
          style="width: 49%;"             
        >
          <el-option
            v-for="item in searchForm.gradeOption2"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </div>
      <div class="bottom-part">
        <el-select
          v-model="searchForm.gradevalue3"
          placeholder="内河等外航道"
          clearable                    
          @change="()=>{searchForm.hiddenTrouble = '',filterClick()}"
          style="width: 49%;margin-right: 2%;"             
        >
          <el-option
            v-for="item in searchForm.gradeOption3"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="searchForm.isDabiao"
          multiple
          collapse-tags
          placeholder="通航净高达标情况"                    
          @change="()=>{searchForm.hiddenTrouble = '',filterClick()}"
          style="width: 49%;"             
        >
          <el-option
            v-for="item in searchForm.isDabiaoOption"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="bottom-part">
        <el-select
          v-model="searchForm.hiddenTrouble"
          placeholder="隐患桥梁"
          clearable                    
          @change="filterClick"
          style="width: 49%;margin-right: 2%;"             
        >
          <el-option
            v-for="item in searchForm.hiddenTroubleOption"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="isAccident"      
          collapse-tags
          @change="isAccidentChange"
          placeholder="事故桥梁"                    
          style="width: 49%;"             
        >
          <el-option
            v-for="item in isAccidentOption"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        <van-popup v-model:show="showPopup1" round closeable position="bottom">
          <!-- <div class="content-rank">
            <div class="rank-title">被撞桥梁排名统计</div>
            <div class="rank-chart-box" v-if="rammedBridgeData?.length > 0">
              <div                
                class="rank-chart"
                :style="'height:' + 33 * rammedBridgeData?.length + 'px'"
                id="bar-chart"
              >
              </div>              
            </div>
            <div class="no-data" v-else>暂无数据</div>
          </div>  -->
          <div class="bridge-accident">
            <div class="title">被撞桥梁排名统计</div>
            <div class="bridge-accident-content" v-if="rammedBridgeData.length">
              <div class="bridge-accident-item" v-for="(item,index) in rammedBridgeData" :key="index">
                <div class="top-part">
                  <div class="name">{{ item.name }}</div>
                  <div class="value">{{ item.value }}</div>
                </div>
                <van-progress :percentage="item.progress" stroke-width="8" color="#6b9bfd" :show-pivot="false" />
              </div>
            </div>
            <div 
              class="no-data" 
              style="text-align: center;font-size: 20px;line-height: 300px;"
              v-else
            >
              暂无数据
            </div>
          </div>  
        </van-popup>
      </div>
    </div>
    <!-- 地图 -->
    <div class="map">
      <OlArc ref="OlArcRef"></OlArc>
      <div 
        class="hidden-trouble" 
        v-show="searchForm.hiddenTrouble"
        @click="showHiddenTrouble();"
      >
        <img src="../../../static/images/bridgeAreaControl/hidden-details.png" />
        隐患桥梁情况
      </div>
      <div class="overall-legend">
        <div class="overall-legend-item">
          <img src="../../../static/images/bridgeAreaControl/dabiaoQl.png" />
          净高达标桥梁
        </div>
        <div class="overall-legend-item">
          <img src="../../../static/images/bridgeAreaControl/dabiaoBQl.png" />
          净高不达标桥梁
        </div>
        <div class="overall-legend-item">
          <img src="../../../static/images/bridgeAreaControl/hidden-trouble.png" />
          隐患桥梁
        </div>
      </div>
      <van-popup 
        v-model:show="showHiddenTroublePopup" 
        round
        closeable 
        position="bottom"
      >
        <div class="hidden-trouble-details">
          <div class="title">隐患桥梁情况</div>
          <div class="subtitle">按行政区域划分</div>
          <div id="hiddenChart1" style="height: 240px;"></div>
          <div class="subtitle">按流域划分</div>
          <div id="hiddenChart2" style="height: 200px;"></div>
        </div>
      </van-popup>
    </div>
    <!-- 筛选 -->
    <!-- <div class="overall-search" @click="searchStatistics">
      <img
        src="../../../static/images/bridgeAreaControl/icon_search.png"
        alt=""
      />
    </div> -->
    <!-- 天气 -->
    <!-- <div class="overall-weather" @click="clickWeather">
      <img
        src="../../../static/images/bridgeAreaControl/icon_tianqi.png"
        alt=""
      />
    </div> -->
    <!-- 图例 -->
    <!-- <div class="overall-legend">
      <div class="overall-legend-item">
        <img
          src="../../../static/images/bridgeAreaControl/dabiaoQl.png"
          alt=""
        />净高达标桥梁
      </div>
      <div class="overall-legend-item">
        <img
          src="../../../static/images/bridgeAreaControl/dabiaoBQl.png"
          alt=""
        />净高不达标桥梁
      </div>
    </div>
    <OlArc ref="OlArcRef"></OlArc> -->
    <!-- 底部内容 -->
    <!-- <div
      class="bottom-content-container"
      :class="bottomContentUnfold ? 'height100bf' : 'height120'"
      @click="bottomStatistics"
    >
      <div
        class="bottom-content"
        :class="bottomContentUnfold ? 'height420' : 'height195'"
        @click.stop="stopClick"
      >
        <div class="bottom-content-icon" @click="bottomStatistics"></div>
        <div class="bottom-content-info">
          <div class="info-statistics">
            <div class="statistics-item-box">
              <div class="statistics-item">
                <div class="statistics-title">
                  <img
                    src="../../../static/images/bridgeAreaControl/home_lc.png"
                    alt=""
                  />
                  航道里程数<span class="num"
                    >共{{ BgAndWyData.hdMile?.toString() || "--" }}公里</span
                  >
                </div>
                <div class="statistics-content">
                  <div class="content-item">
                    <div class="content-bottom">高等级</div>
                    <div class="content-top">
                      {{ BgAndWyData.hdHighLevel?.toString() || "--" }}
                    </div>
                  </div>
                  <div class="content-item">
                    <div class="content-bottom">等级</div>
                    <div class="content-top">
                      {{ BgAndWyData.hdOtherLevel?.toString() || "--" }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="statistics-item">
                <div class="statistics-title">
                  <img
                    src="../../../static/images/bridgeAreaControl/home_cbll.png"
                    alt=""
                  />上个月船舶流量(艘)
                </div>
                <div class="statistics-content">
                  <div class="content-item">
                    <div class="content-bottom">高等级</div>
                    <div class="content-top">
                      {{ CbllData.high?.toString() || "--" }}
                    </div>
                  </div>
                  <div class="content-item">
                    <div class="content-bottom">等级</div>
                    <div class="content-top">
                      {{ CbllData.other?.toString() || "--" }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="statistics-item-box">
              <div class="statistics-item">
                <div class="statistics-title">
                  <img
                    src="../../../static/images/bridgeAreaControl/home_ql.png"
                    alt=""
                  />
                  桥梁总数(座)<span class="num"
                    >共{{ BgAndWyData.totalBridge?.toString() || "--" }}座</span
                  >
                </div>
                <div class="statistics-content">
                  <div class="content-item">
                    <div class="content-bottom">高等级航道</div>
                    <div class="content-top">
                      {{ BgAndWyData.bgHighLevel?.toString() || "--" }}
                    </div>
                  </div>
                  <div class="content-item">
                    <div class="content-bottom">等级航道</div>
                    <div class="content-top">
                      {{ BgAndWyData.bgOtherLevel?.toString() || "--" }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="statistics-item" style="margin-bottom: 0">
                <div class="statistics-title" style="height: 16px"></div>
                <div class="statistics-content">
                  <div class="content-item">
                    <div class="content-bottom content-bottom-hd">
                      高等级航道 <span class="db">(净空达标)</span>
                    </div>
                    <div class="content-top">
                      {{ BgAndWyData.bgDabiaoHighLevel?.toString() || "--" }}
                    </div>
                  </div>
                  <div class="content-item content-item-hd">
                    <div class="content-bottom content-bottom-hd">
                      高等级航道 <span class="bdb">(净空不达标)</span>
                    </div>
                    <div class="content-top" style="color: #F13939;">
                      {{ BgAndWyData.bgNoDabiaoHighLevel?.toString() || "--" }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-content-rank">
          <div class="rank-title">近三年被撞桥梁排名统计</div>
          <div class="rank-chart-box">
            <div
              v-if="rammedBridgeData?.length > 0"
              class="rank-chart"
              :style="'height:' + 33 * rammedBridgeData?.length + 'px'"
              id="bar-chart"
            ></div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 筛选 -->
    <!-- <div
      class="bottom-content-container"
      style="height: 100%"
      v-show="searchUnfold"
      @click="searchStatistics"
    >
      <div
        class="bottom-content"
        :class="searchUnfold ? 'height450' : 'height0'"
        @click.stop="stopClick"
      >
        <div class="bottom-content-top">
          筛选
          <div class="top-del_icon"></div>
        </div>
        <van-search
          v-model="searchForm.searchvalue"
          placeholder="请输入航道名称|桥梁名称筛选"
        />
        <div class="form-item">
          <div class="item-title">所在区域</div>
          <el-select
            v-model="searchForm.areavalue"
            filterable
            placeholder="所在区域"
            class="item-select"
            clearable
          >
            <el-option
              v-for="item in BmCenterData"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </div>
        <div class="form-item">
          <div class="item-title">航道等级</div>
          <el-select
            v-model="searchForm.gradevalue"
            filterable
            clearable
            multiple
            collapse-tags
            placeholder="高等级"
            class="item-select"
          >
            <el-option
              v-for="item in searchForm.gradeOption"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
          <el-select
            v-model="searchForm.gradevalue2"
            filterable
            multiple
            collapse-tags
            placeholder="等级"
            class="item-select"
            clearable
          >
            <el-option
              v-for="item in searchForm.gradeOption2"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </div>
        <div class="form-item">
          <div class="item-title">通航净高达标情况</div>
          <div class="form-select">
            <div
              class="select-item"
              :class="searchForm.isDabiao[0] ? 'active' : ''"
              @click="clickDabiao(0)"
            >
              达标桥梁
            </div>
            <div
              class="select-item"
              :class="searchForm.isDabiao[1] ? 'active' : ''"
              @click="clickDabiao(1)"
            >
              不达标桥梁
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="item-title">桥梁事故</div>
          <div class="form-select">
            <div
              class="select-item"
              :class="searchForm.isAccident[0] ? 'active' : ''"
              @click="clickShipGu(0)"
            >
              近三年被撞桥梁
            </div>
            <div
              class="select-item"
              :class="searchForm.isAccident[1] ? 'active' : ''"
              @click="clickShipGu(1)"
            >
              近一年被撞桥梁
            </div>
          </div>
        </div>
        <div class="form-btn" @click="filterClick">筛选</div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { onMounted, ref, nextTick } from "vue";
import { useRouter } from "vue-router";
import OlArc from "../component/map.vue";
import { closeToast, showLoadingToast, showToast } from "vant";
import {
  getCbll,
  getBgAndWy,
  rammedBridge,
  getBmCenter,
  getBgHd,
  getBridgeList,
  getPosInfo,
  cityDivision, //隐患桥梁情况-地市划分
  regionDivision, //隐患桥梁情况-流域划分
} from "../../../utils/bridgeAreaControlApi";
//引入Echarts
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent } from 'echarts/components';
import { PieChart, BarChart, LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, PieChart, BarChart, LineChart, CanvasRenderer]);
const router = useRouter();
const OlArcRef = ref(null);
// 筛选
const searchUnfold = ref(false);
const isLoading = ref(false);
const loadingNum = ref(0);
const searchForm = ref({
  searchvalue: "",
  areavalue: "",
  showAreaPicker: false,  
  isAccident: [false, false],
  areaOption: [],
  gradevalue: [],
  gradeOption: [{ name: "一级" }, { name: "二级" }, { name: "三级" }],
  gradevalue2: [],
  gradeOption2: [{ name: "四级" }, { name: "五级" }, { name: "六级" }, { name: "七级" }],
  gradevalue3: [],
  gradeOption3: [{ name: "内河等外航道", value: "八级" }],
  // isDabiao: [false, false],
  isDabiao: [],
  isDabiaoOption: [{ name: "达标", value: 0 },{ name: "不达标", value: 1 }],
  hiddenTrouble: [],
  hiddenTroubleOption: [{ name: '隐患桥梁', value: '隐患桥梁' }]
});
const showLoading = () => {
  isLoading.value = true;
  loadingNum.value++;
};
const hiddenLoading = () => {
  loadingNum.value--;
  if (loadingNum.value === 0) {
    isLoading.value = false;
    loadingNum.value = 0;
  }
};
//地图筛选
const filterClick = () => {
  if(searchForm.value.hiddenTrouble){
    searchForm.value.searchvalue = '';
    searchForm.value.isDabiao = '';
    searchForm.value.gradevalue = [];
    searchForm.value.gradevalue2 = [];
    searchForm.value.gradevalue3 = []
  }

  let {
    searchvalue,
    areavalue,
    isAccident,
    isDabiao,
    gradevalue,
    gradevalue2,
    gradevalue3,
    hiddenTrouble,
  } = searchForm.value;

  OlArcRef.value?.getPosInfoFn(
    {
      keyword: searchvalue,
      level: gradevalue.concat(gradevalue2).concat(gradevalue3).toString(),      
      isDabiao: isDabiao.toString(),
      // bmpName: areavalue,  
      // isAccident:
      //   (isAccident[0] ? "3" : "") +
      //   (isAccident[0] && isAccident[1] ? "," : "") +
      //   (isAccident[1] ? "1" : ""),
      // level: gradevalue.toString() + (gradevalue.length && gradevalue2.length ? "," : "") + gradevalue2.toString(),
      // isDabiao:
      //   (isDabiao[0] ? "0" : "") +
      //   (isDabiao[0] && isDabiao[1] ? "," : "") +
      //   (isDabiao[1] ? "1" : ""),
    },
    hiddenTrouble,
  );
  searchUnfold.value = false;
};
const clickWeather = () => {
  router.push({
    path: "/bridgeAreaControl-weather",
  });
};
const clickDabiao = (val) => {
  searchForm.value.isDabiao[val] = !searchForm.value.isDabiao[val];
};
const clickShipGu = (val) => {
  searchForm.value.isAccident[val] = !searchForm.value.isAccident[val];
};
const searchStatistics = () => {
  searchUnfold.value = !searchUnfold.value;
};
const CbllData = ref({});
const getCbllDataFn = (data) => {
  showLoading();
  getCbll(data)
    .then((res) => {
      if (res.code === 200 && res.data) {
        CbllData.value = res.data;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const BgAndWyData = ref({});
const getBgAndWyDataFn = (data) => {
  showLoading();
  getBgAndWy(data)
    .then((res) => {
      if (res.code === 200 && res.data) {
        BgAndWyData.value = res.data;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
// 底部内容
const bottomContentUnfold = ref(false);
const bottomStatistics = () => {
  bottomContentUnfold.value = !bottomContentUnfold.value;
};
//被撞桥梁排名统计
const showPopup1 = ref(false);
const isAccident = ref('');
const isAccidentOption = [
  { name: '近三年被撞桥梁', value: 3 },
  { name: '近一年被撞桥梁', value: 1 },
];
const rammedBridgeData = ref([]);
const getrammedBridgeDataFn = () => {
  showLoading();
  rammedBridge({
    isAccident: isAccident.value
  }).then((res) => {
    if (res.code === 200 && res.data.length) { 
      // rammedBridgeData.value = res.data;
      // setTimeout(() => {
      //   initBarChart();
      // }, 100);
      rammedBridgeData.value = [];
      res.data.forEach((item) => {
        let obj = {
          name: item.bridgeName,
          value: item.times
        };
        if(item.times === 3){
          obj.progress = 100;
        }else if(item.times === 2){
          obj.progress = 66;
        }else if(item.times === 1){
          obj.progress = 33;
        }
        rammedBridgeData.value.push(obj);
      });    
    }else{
      rammedBridgeData.value = [];
    }
  }).finally(() => {
    hiddenLoading();
  });
};
const initBarChart = () => {
  nextTick(() => {
    let barChart = echarts.getInstanceByDom(document.getElementById("bar-chart"));
    if (barChart == null) {
      barChart = echarts.init(document.getElementById("bar-chart"));
    }
    let option;
    let result = [];
    rammedBridgeData.value?.forEach((ele) => {
      result.push({
        name: ele.bridgeName,
        value: ele.times,
      });
    });
    option = {
      tooltip: {
        show: false,
        trigger: "item",
        padding: [8, 15],
        borderColor: "rgba(3, 11, 44, 0.5)",
        textStyle: {
          color: "#9bb2de",
        },
      },
      legend: {
        show: false,
      },
      grid: {
        left: "0",
        right: "50",
        top: "10",
        bottom: "5",
      },
      xAxis: [
        {
          splitLine: {
            show: false,
          },
          type: "value",
          show: false,
        },
      ],
      yAxis: [
        {
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          type: "category",
          axisTick: {
            show: false,
          },
          inverse: true,
          data: result.map((item) => item.name),
          axisLabel: {
            fontSize: 12,
            margin: 0,
            formatter: (name, index) => {
              const id = index + 1;
            },
          },
        },
        {
          type: "category",
          inverse: true,
          axisTick: "none",
          axisLine: "none",
          show: true,
          axisLabel: {
            formatter: function (value) {
              return value + "次";
            },
          },
          data: result.map((item) => item.value),
        },
      ],
      series: [
        {
          name: "",
          type: "bar",
          barWidth: 6, // 柱子宽度
          MaxSize: 0,
          showBackground: false,
          barBorderRadius: [30, 30, 30, 30],
          backgroundStyle: {
            color: "#194B72",
          },
          label: {
            show: true,
            offset: [10, -15], // 将标签上移20个像素
            color: "#000000",
            fontWeight: 500,
            position: "left",
            align: "left",
            fontSize: 12,
            formatter: function (params) {
              return params.data.name;
            },
          },

          data: result.map((item, index) => {
            return {
              name: item.name,
              value: item.value,
              itemStyle: {
                barBorderRadius: [0, 0, 0, 0],
                color: "#6b9bfd",
              },
            };
          }),
        },
      ],
      tooltip: {
        show: true,
        trigger: "axis",
        axisPointer: {
          type: "none",
        },
        formatter: function (params) {
          return "● " + params[0].name + ": " + params[0].value;
        },
      },
    };
    option && barChart.setOption(option);
  });
};
const isAccidentChange = () => {
  getrammedBridgeDataFn();
  showPopup1.value = true;
};
const stopClick = () => {};

//桥梁
const BmCenterData = ref([]);
const getBmCenterDataFn = () => {
  return new Promise((resolve, reject) => {
    getBmCenter().then((res) => {
      if (res.code === 200 && res.data.length) {
        BmCenterData.value = res.data.map((ele, index) => {
          return {
            text: ele.name,
            value: ele.name,
            index: index,
            children: [],
          };
        });
      }
    }).finally(() => {
      resolve();
    });
  });
};
const onHandleChange = ({ value, tabIndex, selectedOptions }) => {
  let { index } = selectedOptions[0];
  if (tabIndex == "0") {
  //   showLoadingToast("加载中...");
  //   getBgHd({ bmpName: value })
  //     .then((res) => {
  //       if (res.data.length == "0") {
  //         setTimeout(() => {
  //           showToast("当前选项找不到数据");
  //         }, 500);
  //       }
  //       let children = res.data?.map((ele, currentIndex) => {
  //         return {
  //           text: ele.hangdao,
  //           value: ele.hangdao,
  //           index: currentIndex,
  //           plantIndex: index,
  //           children: [],
  //         };
  //       });
  //       BmCenterData.value[index].children = children || [];
  //     })
  //     .finally(() => {
  //       closeToast();
  //     });
  // } else if (tabIndex == "1") {
  //   showLoadingToast("加载中...");
  //   let { plantIndex, index } = selectedOptions[1];
    getBridgeList({ bmpName: value })
      .then((res) => {
        if (res.data.length == "0") {
          setTimeout(() => {
            showToast("当前选项找不到数据");
          }, 500);
        }
        let children2 = res.data?.map((ele) => {
          return {
            text: ele.name,
            value: ele.name,
          };
        });
        // if (BmCenterData.value[plantIndex].children[index]) {
        //   BmCenterData.value[plantIndex].children[index].children = children2 || [];
        // }
        BmCenterData.value[index].children = children2 || [];
      })
      .finally(() => {
        closeToast();
      });
  }
};
const onHandleFinish = ({ selectedOptions }) => {
  showPopup.value = false;
  searchForm.value.searchvalue = selectedOptions[1].value;
  filterClick();
};
const showPopup = ref(false);
const cascaderValue = ref('');

const bridgeOption = ref([]);
const getPosInfoFn = () => {
  getPosInfo().then((res) => {
    if(res.code === 200){
      bridgeOption.value = res.data;
    }
  });
};

//隐患桥梁情况
const showHiddenTroublePopup = ref(false);
const showHiddenTrouble = () => {
  showHiddenTroublePopup.value = true;
  cityDivisionFn();
  regionDivisionFn();
};
const xAxisData = ref([]);
const seriesData = ref([]);
const cityDivisionFn = () => {
  cityDivision().then((res) => {
    if(res.code === 200 && res.data.length){
      res.data.forEach((item) => {
        xAxisData.value.push(item.city);
        seriesData.value.push(item.cityNumber);
      });
      initBarChart1();
    }
  });
};
const initBarChart1 = () => {
  let barChart = echarts.getInstanceByDom(document.getElementById("hiddenChart1"));
  if(barChart != null && barChart != "" && barChart != undefined){
    barChart.dispose();
  }
  barChart = echarts.init(document.getElementById('hiddenChart1'));

  let option;
  option = {
    grid: {
      top: "20px",
      left: "45px",
      right: "40px",
      bottom: "80px",
    },
    tooltip: {
      trigger: "axis",
      confine: true, //限制在图表区域内
    },
    axisPointer: {
      type: "shadow",
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        startValue: 0,
        endValue: 9,
        zoomLock: false,
      },
    ],
    xAxis: {
      type: "category",
      data: xAxisData.value,
      axisLabel: {
        interval: 0,
        rotate: 60, //倾斜的程度
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "",
        data: seriesData.value,
        type: "bar",
        barWidth: 12,
        color: "#165DFF",
      },
    ],
  };
  option && barChart.setOption(option);
};
const regionDivisionFn = () => {
  regionDivision().then((res) => {
    if(res.code === 200){
      let regionDivisionData = [];
      res.data.forEach((item,index) => {
        let obj = {
          name: item.region,
          value: item.regionNumber,
        };
        regionDivisionData.push(obj);
      });    
      
      setTimeout(() => {
        initPieChart(regionDivisionData);  
      }, 100);
    }
  });
};
const initPieChart = (regionDivisionData) => {
  nextTick(() => {
    let pieChart = echarts.getInstanceByDom(document.getElementById("hiddenChart2"));
    if(pieChart != null && pieChart != "" && pieChart != undefined){
      pieChart.dispose();
    }
    pieChart = echarts.init(document.getElementById('hiddenChart2'));
    let option = {            
      legend: {        
      },    
      tooltip: {
        trigger: 'item',
        confine: true, //限制在图表区域内   
      },     
      series: [
        {
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,          
          },
          labelLine: {
            show: true, //标签连接线
          },  
          data: regionDivisionData
        }
      ],          
    };
    option && pieChart.setOption(option);
  
  });
};

onMounted(() => {
  getCbllDataFn();
  getBgAndWyDataFn();
  // getrammedBridgeDataFn();
  getBmCenterDataFn();
  getPosInfoFn();
});
</script>

<style lang="scss" scoped>
::v-deep.el-select-dropdown__item {
  width: calc(100vw - 20px);
}
.overall-main {
  position: relative;
  height: 100%;
  .BAC-title {
    height: 68px;
    width: 100%;    
    line-height: 68px;    
    font-size: 24px;
    color: #FFFFFF;
    text-align: center;
    z-index: 10;
    background: url('../../../static/images/bridgeAreaControl/bg_zhuanti.png') no-repeat;
    background-size: cover;
    font-weight: 500;
  }
  .overall-search {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: center;
    border-radius: 8px 8px 8px 8px;
    align-items: center;
    img {
      width: 21px;
      height: 21px;
    }
  }
  .overall-weather {
    position: absolute;
    bottom: 205px;
    right: 10px;
    width: 32px;
    height: 32px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: center;
    border-radius: 8px 8px 8px 8px;
    align-items: center;
    img {
      width: 20px;
      height: 16px;
    }
  }
  /*
  .overall-legend {
    position: absolute;
    bottom: 205px;
    left: 10px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    z-index: 10;
    width: 110px;
    height: 49px;
    padding: 8px 6px;
    box-sizing: border-box;
    .overall-legend-item {
      display: flex;
      align-items: center;
      line-height: 14px;
      font-size: 12px;
      img {
        width: 10px;
        height: 13px;
        margin-right: 2px;
      }
    }
    .overall-legend-item:nth-child(2) {
      margin-top: 8px;
    }
  }
  */
  .bottom-content-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.6);
    .bottom-content-top {
      text-align: center;
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
      color: #262626;
    }
    .bottom-content {
      overflow: hidden;
      width: 100%;
      background-color: #fff;
      border-bottom: 1px solid #dee1e6;
      position: absolute;
      bottom: 0;
      transition: all 0.3s ease;
      .form-item {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        margin-top: 5px;
        .item-title {
          margin-bottom: 5px;
          font-weight: bold;
          color: #262626;
        }
        .item-select {
          width: 100%;
          border: none !important;
          background-color: #f7f8fa !important;
          margin-bottom: 5px;
        }
        .form-select {
          margin-bottom: 10px;
          display: flex;
          .select-item {
            padding: 8px 26px;
            margin-right: 16px;
            border: 1px solid #d9d9d9;
            color: #8c8c8c;
            border-radius: 8px;
          }
          .select-item.active {
            background-color: #f0f0f0;
          }
        }
      }
      .form-btn {
        position: absolute;
        bottom: 20px;
        width: calc(100% - 20px);
        border-radius: 5px;
        background-color: #2d78ed;
        color: #fff;
        margin: 10px 10px 0;
        text-align: center;
        line-height: 40px;
        box-sizing: border-box;
      }
      .bottom-content-icon {
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 53px;
        height: 3px;
        background: rgba(38, 111, 232, 0.5);
        border-radius: 2px 2px 2px 2px;
      }
      .bottom-content-info {
        .info-statistics {
          padding: 0 10px;
          box-sizing: border-box;
          margin-top: 20px;
          font-size: 12px;
          .statistics-item-box {
            // width: calc(50% - 5px);
            position: relative;
            width: 100%;
            display: flex;
            justify-content: space-between;
          }
          .statistics-item-box:nth-child(1) {
            border-bottom: 1px solid #d9d9d9;
            margin-bottom: 8px;
            height: 83px;
          }
          .statistics-item-line {
            position: absolute;
            top: 54%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 1px;
            background-color: #d5d5d5;
          }
          .statistics-item {
            padding: 0 5px;
            box-sizing: border-box;
            margin-bottom: 5px;
            width: calc(50% - 5px);
            font-size: 14px;
            .statistics-title {
              // height: 18px;
              color: rgba(0,0,0,0.6);
              font-size: 14px;
              font-weight: bold;
              display: flex;
              align-items: center;
              img {
                width: 18px;
                height: 18px;
              }
              .num {
                font-size: 12px;
                color: #6b9bfd;
                margin-left: 4px;
              }
            }

            .statistics-content {
              .content-item {
                display: flex;
                color: #595959;
                align-items: center;
                .content-top {
                  font-size: 18px;
                  margin-top: 6px;
                }

                .content-bottom {
                  font-size: 12px;
                  width: 70px;
                  margin-top: 6px;
                  padding-left: 18px;
                  .db {
                    font-size: 12px;
                    color: #4ed9a0;
                    font-weight: bold;
                  }
                  .bdb {
                    font-size: 12px;
                    color: #F13939;
                    font-weight: bold;
                  }
                }
                // .content-item-hd{
                // }
                .content-bottom-hd {
                  width: 180px;
                  padding-left: 0px;
                }
              }
            }
          }
        }
      }
      .bottom-content-rank {
        width: 100%;
        height: 300px;
        padding: 0 10px;
        margin-bottom: 60px;
        .rank-title {
          margin-top: 20px;
          font-size: 16px;
          font-weight: bold;
          color: #262626;
          height: 16px;
          line-height: 14px;
        }
        .rank-chart-box {
          margin-top: 10px;
          width: 100%;
          height: 221px;
          overflow-y: scroll;
          padding: 0 8px 8px 8px;
          box-sizing: border-box;
          .rank-chart {
            height: 270px;
            width: 100%;
          }
          .no-data{
            text-align: center;
          }
        }
      }
    }
  }

  .count-content{ 
    background: #FFFFFF;
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.08);
    border-radius: 8px;
    margin: 16px 20px 11px 20px;
    .top-part{
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      margin: 0 8px;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      .info{
        .title{
          color: #595959;
          display: flex;
          align-items: center;
          margin-bottom: 6px;
          img{
            width: 18px;
            height: 18px;
          }
          .name{
            font-weight: 500;
            font-size: 14px;
            color: #595959;
            margin-right: 4px;
          }
          .value{
            font-weight: bold;
            font-size: 12px;
            color: #165DFF;
          }
        }
        .item{
          display: flex;
          align-items: center;
          .name{
            width: 48px;
            margin-left: 28px;
            font-weight: 400;
            font-size: 12px;
            color: #595959;            
          }
          .value{
            font-weight: bold;
            font-size: 16px;
            color: #262626;            
          }
        }      
      }
      .width55{
        width: 55%;
      }
      .width45{
        width: 45%;
      }
    }
    .bottom-part{
      padding: 8px 0;
      margin: 0 8px;
      .title{
        color: #595959;
        display: flex;
        align-items: center;
        margin-bottom: 6px;
        img{
          width: 18px;
          height: 18px;
        }
        .name{
          font-weight: 500;
          font-size: 14px;
          color: #595959;
          margin-right: 4px;         
        }
        .value{
          font-weight: bold;
          font-size: 12px;
          color: #165DFF;
        }
      }
      .info{
        display: flex;     
        flex-wrap: wrap;   
        .item{
          display: flex;
          align-items: center;
          .name{           
            font-weight: 400;
            font-size: 12px;
            color: #595959; 
            margin-left: 28px;   
            .db{
              color: #4ED9A0;
            }
            .bdb{
              color: #F13939;
            }        
          }
          .value{
            font-weight: bold;
            font-size: 16px;
            color: #262626;
          }
        }
        .width40{
          width: 40%;
        }
        .width60{
          width: 60%;
        }
      }
    }
  }
  .filter{
    margin: 0px 20px;
    .top-part{
      display: flex;
      align-items: center;
      .search{
        width: 80%;
        position: relative;        
      }
      .search-text{
        width: 8%;
        margin-left: 2%;
      }
      .filter-icon{
        width: 10%;
        padding-top: 5px;
        img{
          width: 40px;
          height: 40px;
        }
      }
    }
    .bottom-part{
      display: flex;
      flex-wrap: wrap;
      :deep(.van-cell){
        padding: 4px 8px;
      }
      margin-bottom: 4px;
      .content-rank {
        height: 300px;
        .rank-title {
          margin: 20px;
          font-size: 16px;
          font-weight: bold;
          color: #262626;
          height: 16px;
          line-height: 14px;
        }
        .rank-chart-box {
          margin-top: 10px;
          width: 100%;
          height: 260px;
          overflow-y: scroll;
          padding: 0 12px 8px 12px;
          box-sizing: border-box;
          .rank-chart {
            height: 300px;
            width: 100%;
          }
        }
        .no-data{
          text-align: center;
          margin-top: 100px;
          font-size: 16px;
        }
      } 
      .bridge-accident{    
        .title {
          margin: 20px;
          font-size: 16px;
          font-weight: bold;
          color: #262626;
          height: 16px;
          line-height: 14px;
        }
        .bridge-accident-content{
          height: 300px;
          overflow-y: auto;
          .bridge-accident-item{
            margin: 10px 0;
            padding: 0 10px;
            .top-part{
              display: flex;
              justify-content: space-between;
              margin-bottom: 8px;
              .name{
                font-weight: 400;
                font-size: 14px;
              }
              .value{
                font-weight: bold;
                font-size: 14px;
              }
            }
          }
        }
      }     
    }
  }
  .map{
    height: 300px;
    position: relative;
    margin: 16px 20px;
    .overall-legend {
      position: absolute;
      left: 8px;
      bottom: 8px;
      background: #FFFFFF;
      border-radius: 4px;
      z-index: 10;
      width: 110px;
      height: 75px;
      padding: 6px;
      box-sizing: border-box;
      .overall-legend-item {
        display: flex;
        align-items: center;
        font-size: 12px;
        margin: 4px 0;
        img {
          width: 10px;
          height: 13px;
          margin-right: 2px;
        }
      }
    }
    .hidden-trouble{
      position: absolute;
      top: 8px;
      left: 8px;
      background: #FFFFFF;
      border-radius: 4px;
      z-index: 10;
      padding: 6px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      img{
        width: 18px;
        height: 18px;
        padding-right: 4px;
      }
    }
    .hidden-trouble-details{
      height: 580px;
      .title{
        margin: 20px;
        font-size: 16px;
        font-weight: bold;
        color: #262626;
        height: 16px;
        line-height: 16px;
      }
      .subtitle{
        display: flex;
        background: rgba(22, 93, 255, 0.05);
        height: 36px;
        color: #262626;
        padding: 0 8px;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        font-size: 14px;
        margin-bottom: 10px;
      }
    }
  }
}

:deep(.van-search){
  padding: 0;
}
:deep(.van-search__content){
  background: #FFFFFF;
}
:deep(.el-select .el-input__inner){
  height: 28px;
}
.box_shadow {
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
}
.height100bf {
  height: 100%;
}
.height450 {
  height: 450px;
}
.height420 {
  height: 420px;
}
.height195 {
  height: 195px;
}
.height120 {
  height: 120px;
}
.height0 {
  height: 0px;
}
</style>
